<template>
	<view>
		<view class="eleBottle" v-for="item in bottles" key="bottle_id">
			<button class="bottle_b" @click="check(item.question,item.bottle_id)"></button>
			<button style="width: 20%;height: 180rpx; background-color: #F56C6C;" @click="delete_bottle(item.bottle_id)">删除</button>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { Bottle } from '../../../public/p_interface';
	import {onLoad} from '@dcloudio/uni-app';

	let bottles = ref<Bottle[]>();
	
	const check =(question:string,bottle_id:number)=>{
		uni.navigateTo({
		    url: '/pages/bottle/bottle_m?question='+question+'&'+'id='+bottle_id
		}); 
	}
	const delete_bottle =(bottle_id : number)=>{
		uni.request({
		    url: 'http://121.40.242.216:8081/api/bottle/remove',
			method:'GET',
		    data: {
				id:bottle_id
		    },
		    header: {
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
		        console.log(res.data);
		    }
		});
		console.log("删除该漂流瓶")
	}
	onLoad(()=>{
		uni.request({
		    url: 'http://121.40.242.216:8081/api/bottle/list',
			method:'GET',
		    data: {
				
		    },
		    header: {
		        'custom-header': 'hello',
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
				bottles.value=res.data!.data;
		        console.log(res.data);
		    }
		});
	})
</script>

<style>
	.bottle_b{
		width: 70%;
		height: 180rpx; 
		background: url('http://121.40.242.216:9000/bucket-chat/5f8947161d2cc606278d25954015ddb.png');
		background-size: cover; /* 使背景图像覆盖整个元素 */
		background-position: center; /* 背景图像居中对齐 */  
		background-repeat: no-repeat;
	}
	.eleBottle{
		width: 100%;
		height: 200rpx;
		align-items: center;
		display: flex;
		margin-top: 70rpx;
		background: azure;
		border-radius: 20rpx;
	}  
</style>
